<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <title>Test jsonElement</title>
        <script language="JavaScript" type="text/javascript" src="/lib/test/jsunit/app/jsUnitCore.js">
        </script>
        <script language="JavaScript" type="text/javascript" src="/lib/test/selenium/lib/prototype.js">
        </script>
        <script language="JavaScript" type="text/javascript" src="utils/mock-selenium-logger.js">
        </script>
        <script language="JavaScript" type="text/javascript" src="/lib/test/selenium/lib/scriptaculous/scriptaculous.js">
        </script>
        <script language="JavaScript" type="text/javascript" src="/lib/test/selenium/lib/cssQuery/cssQuery-p.js">
        </script>
        <script language="JavaScript" type="text/javascript" src="/lib/test/selenium/scripts/selenium-browserdetect.js">
        </script>
        <script language="JavaScript" type="text/javascript" src="/lib/test/selenium/scripts/selenium-browserbot.js">
        </script>
        <script language="JavaScript" type="text/javascript" src="/lib/test/selenium/scripts/htmlutils.js">
        </script>
        <script language="JavaScript" type="text/javascript" src="/user-extensions.js">
        </script>
        <script language="JavaScript" type="text/javascript">
            //			window.onload = function()
            //			{
            //				setUp();
            //				testHeightWidthOnInlineAbsoluteElement();
            //			}
            function exposeTestFunctionNames()
            {
                return ['testElement', 'testPositionOnInlineAbsoluteElement', 'testPositionOnCssAbsoluteElement', 'testBackgroundColor', 'testHeightWidth'];
            }
            
            function setUp()
            {
                pageBot = PageBot.createForWindow(BrowserBot.createForWindow(window));
            }
            
            function testElement()
            {
                var json = pageBot.returnJsonFromLocator('TestDiv');
                var test = eval('(' + json + ')');
                assertEquals('div', test.tagName);
                assertEquals('TestDiv', test.id);
            }
            
            function testPositionOnInlineAbsoluteElement()
            {
                var json = pageBot.returnJsonFromLocator('TestInlineAbsoluteDiv');
                var test = eval('(' + json + ')');
                
                assertEquals(150, test.position.x);
                assertEquals(100, test.position.y);
            }
            
            function testPositionOnCssAbsoluteElement()
            {
                var json = pageBot.returnJsonFromLocator('TestCssAbsoluteDiv');
                var test = eval('(' + json + ')');
                
                assertEquals(150, test.position.x);
                assertEquals(100, test.position.y);
            }
            
            function testHeightWidth()
            {
                var json = pageBot.returnJsonFromLocator('TestCssDefinedHeightWidthDiv');
                var test = eval('(' + json + ')');
                
                assertEquals(300, test.position.x);
                assertEquals(200, test.position.y);
                
                assertEquals(20, test.height);
                assertEquals(40, test.width);
            }
            
            function testBackgroundColor()
            {
                var json = pageBot.returnJsonFromLocator('TestCssBackgroundColor');
                var test = eval('(' + json + ')');
                var testColor = test.style.backgroundColor;
                var color = [0, 255, 0]; //#fff
                assertEquals("red is not correct", color[0], testColor[0]);
                assertEquals("green is not correct", color[1], testColor[1]);
                assertEquals("blue is not correct", color[2], testColor[2]);
            }
            
        </script>
        <style type="text/css">
            #TestCssAbsoluteDiv {
                position: absolute;
                left: 150px;
                top: 100px;
            }
            
            #TestCssDefinedHeightWidthDiv {
                position: absolute;
                left: 300px;
                top: 200px;
                height: 20px;
                width: 40px;
            }
            
            #TestCssBackgroundColor {
                background-color: #0f0;
            }
        </style>
    </head>
    <body>
        <div id="TestDiv">
            TestDiv
        </div>
        <div id="TestInlineAbsoluteDiv" style="position:absolute;left:150px;top:100px">
            TestInlineAbsoluteDiv
        </div>
        <div id="TestCssAbsoluteDiv">
            TestInlineAbsoluteDiv
        </div>
        <div id="TestCssDefinedHeightWidthDiv">
            TestCssDefinedHeightWidthDiv
        </div>
        <div id="TestCssBackgroundColor">
            TestCssBackgroundColor
        </div>
    </body>
</html>
